<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">


    <style type="text/css">
        #panel,
        #flip {
            padding: 5px;
            text-align: center;
            background-color: #e5eecc;
            border: solid 1px #c3c3c3;
        }

        #panel {
            padding: 50px;
            display: none;
        }
    </style>
</head>

<body>

    <div id="flip">点我，显示或隐藏面板。</div>
    <div id="panel">点击我就出来啦！再点击我就消失啦</div>
   

    <script>

        // 根据已有样式完成功能：折叠菜单动画效果   -- 写出滑动的动画效果    20分
        //    提示：点击的时候   下面的div可以显示 隐藏   (点一下显示，再点就隐藏)
        //    参考  https://www.runoob.com/try/try.php?filename=tryjquery_slide_toggle   这个效果
       
        let oFlip = document.querySelector('#flip')
        let oPanel = document.querySelector('#panel')
        oFlip.onclick = function () {

            if (oPanel.style.display == 'none') {
                oPanel.style.display = 'block'
            }
            else {
                oPanel.style.display = 'none'
            }

        }

    </script>

</body>

</html>